import React, { Fragment } from 'react';
import { connect } from 'react-redux';
import BaseComponent from '../../components/common/baseComponent.js';
import couponIcon from '../../../assets/images/escort/menber/coupon.png';
import crownIcon from '../../../assets/images/escort/menber/crown.png';
import Button from '../../components/common/button';

@connect(({ loading, escort }) => {
  return {
    busy: ['pay/genOrder'].some(action => loading.effects[action]),
    hasBuy: escort.get('hasBuyMenber'),
    escortBuyMonth: escort.get('escortBuyMonth'),
  };
})
class MenberPackage extends BaseComponent {
  clickBuy = () => {
    const { busy } = this.props;
    if (busy) {
      return;
    }
    this.props.dispatch({
      type: 'pay/genOrder',
      payload: {
        amount: 100,
        businessOrderType: 5,
      },
    });
  }

  goLink = () => {
    window.location.href = 'https://wxa02.bppc.com.cn/#/home';
  }

  goRule = () => {
    this.props.history.push('rule');
  }

  render() {
    const { hasBuy, escortBuyMonth } = this.props;
    let btn;
    if (hasBuy) {
      btn = (
        <Fragment>
          <div className="info">(注：单个用户每年只可购买一次)</div>
          <div className="text">您已购买权益礼包</div>
        </Fragment>
      );
    } else {
      btn = <div className="action-btn" onClick={this.clickBuy}><div>立即购买</div></div>;
    }
    return (
      <div className="menber-package-escort">
        <div className="header" />
        <div className="menber-card">
          {btn}
        </div>
        <div className="menber-info">
          <div className="title-row">
            <div className="line left" />
            <div className="title">加油金权益介绍</div>
            <div className="line right" />
          </div>
          <div className="text-row">
            <div className="icon-view">
              <img src={crownIcon} alt="" className="icon crown" />
            </div>
            <div className="text-view">
              <div className="text-title">{escortBuyMonth}个月金卡会员权益</div>
              <p className="text">油品消费积分+非油品消费双倍积分+特权购物</p>
            </div>
          </div>
          <div className="text-row">
            <div className="icon-view">
              <img src={couponIcon} alt="" className="icon" />
            </div>
            <div className="text-view">
              <div className="text-title">180元加油金权益</div>
              <p className="text">本权益为9张【中油BP】“油品满200元减20元”电子现金券，可立即领取</p>
            </div>
          </div>
          <div className="text-row">
            <div className="icon-view">
              <img src={couponIcon} alt="" className="icon" />
            </div>
            <div className="text-view">
              <div className="text-title">100元加油金权益</div>
              <p className="text">本权益需车主在【保驾车服】推荐的保险公司官方渠道购买车险后，额外获得5张【中油BP】“油品满200元减20元”电子现金券(仍可享受保险公司相关优惠)</p>
            </div>
          </div>
          <div className="info-view">
            <div className="info-title">说明:</div>
            <p className="info-text">
              1. 每辆车每年仅享受一次上述加油金权益；
              <br />
              2. 加油现金券每日只能用一张；
              <br />
              3. 活动车辆：7座及7座以下家庭自用车；
              <br />
              4. 只支持现金、微信、支付宝、银行卡支付使用；
              <br />
              <span className="red">
                *本权益中“金卡会员权益”必须用相同手机号注册中油BP会员，否则无法使用
              </span>
              <br />
              <span className="red">*详细活动情况请查看活动规则</span>
            </p>
          </div>
        </div>
        <div className="btn-view">
          <Button title="注册中油BP会员" clickFunc={this.goLink} className="action-btn" />
          <Button title="活动规则" clickFunc={this.goRule} className="action-btn" />
        </div>
      </div>
    );
  }
}

export default MenberPackage;
